<template>
    <h2 class="title">计算属性</h2>
    <pre>
        <code>
            import { computed, ref } from 'vue';


            const orderPriceOne = ref(0)
            const orderPriceTwo = ref(0)


            let totalPrice = computed(() => {
                return orderPriceOne.value + orderPriceTwo.value
            })

            function addOrder1(price:number) {
                orderPriceOne.value += price
            }
            function addOrder2(price:number) {
                orderPriceTwo.value += price
            }

            /**
            * computed 函数的第二种写法
            * getter 和 setter 函数
            */
            let totalPrice2 = computed({
                get(){
                    return orderPriceOne.value + orderPriceTwo.value
                },
                set(val:number){
                    if(val == 0 ){
                        orderPriceOne.value = 0
                        orderPriceTwo.value = 0
                    }
                }
            }) 
        </code>
    </pre>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';


const orderPriceOne = ref(0)
const orderPriceTwo = ref(0)


let totalPrice = computed(() => {
    return orderPriceOne.value + orderPriceTwo.value
})

function addOrder1(price: number) {
    orderPriceOne.value += price
}
function addOrder2(price: number) {
    orderPriceTwo.value += price
}

/**
 * computed 函数的第二种写法
 * getter 和 setter 函数
 */
let totalPrice2 = computed({
    get() {
        return orderPriceOne.value + orderPriceTwo.value
    },
    set(val: number) {
        if (val == 0) {
            orderPriceOne.value = 0
            orderPriceTwo.value = 0
        }
    }
}) 
</script>

<style scoped></style>